<template>
  <div>
    {{ obj.count }}, {{ a }}
    <br />
    <van-button type="primary" @click="obj.count+=1">原址obj.count+1</van-button>
    <van-button type="primary" @click="a+=1">原值a+1</van-button>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  watch
} from 'vue';
export default {
  name: "temp",
  setup() {
    const a = ref(0);

    // reactive: 会对对象进行包装
    const obj = reactive({
      count: 0
    })

    // 通过watch来监听
    watch(a, () => {
      console.log("变量a改变了")
    })

    watch(() => obj.count, () => {
      console.log("obj.count改变了")
    })
  
    return {
      a,
      obj
    }
  }
}
</script>